<template>
	<view class="">
		<view class="gradient-ramp">
			<view class="messsage-box-one">
				<!-- 头像 -->
				<image :src="ip + userInfo.avatar" class="headportrait" mode=""></image>
				<!-- 名字 时间 -->
				<view class="">
					<view class="name">
						{{userInfo.realName}}
					</view>
					<view class="id">
						ID:{{userInfo.userId}}
					</view>
				</view>
			</view>
			<!-- 积分详情 -->
			<view class="score-details">
				<view class="score-one">
					<!-- 积分 -->
					<text class="number">{{userInfo.totalScore}}</text>
					<text class="str">积分</text>
				</view>
				<!-- 分割线 -->
				<view class="segmentation">

				</view>

				<!-- 参加活动 -->
				<view class="join">
					<navigator url="../study/study" style="margin: 0 auto;">
						<view class="join-study">
							<image src="/static/images/书籍-打开@2x (3).png"></image>
							<view class="text">
								我要学习
							</view>
						</view>
					</navigator>
					<navigator url="../activity/activity" style="margin: 0 auto;">
						<view class="join-activity">
							<image src="/static/images/旗子@2x (2).png" mode=""></image>
							<view class="text">
								我要参加活动
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>

		<view class="" style="padding: 0 32rpx;">
			<!-- 加分项 -->
			<view @click="myData">
				<view class="grade">
					<text class="grade-one">编辑个人资料</text>
					<view class="grade-two">
						<image src="/static/images/右@2x.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 普通用户展示的面板 -->
			<!-- 加分项 -->
			<view class="my-behavior" v-if="keybl">
				<view class="grade" @click="activity(1)">
					<text class="grade-one">做出的贡献</text>
					<view class="grade-two">
						<image src="/static/images/右@2x.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
					</view>
				</view>
				<view class="grade" @click="activity(2)">
					<text class="grade-one">提出的建议</text>
					<view class="grade-two">
						<image src="/static/images/右@2x.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
					</view>
				</view>
				<view class="grade" @click="activity(3)">
					<text class="grade-one">参与过的学习</text>
					<view class="grade-two">
						<image src="/static/images/右@2x.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
					</view>
				</view>
			</view>

			<view class="my-behavior" v-if="keybl">
				<view class="grade" @click="skip">
					<text class="grade-one">我参加过的活动（上传）</text>
					<view class="grade-two">
						<image src="/static/images/右@2x.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
					</view>
				</view>
				<view class="grade" @click="participation">
					<text class="grade-one">我上传过的活动</text>
					<view class="grade-two">
						<image src="/static/images/右@2x.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 管理员展示的面板 -->
			<view class="my-behavior" v-else>
				<view class="grade" @click="activity(4)">
					<text class="grade-one">发布过的活动</text>
					<view class="grade-two">
						<image src="/static/images/右@2x.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
					</view>
				</view>
				<view class="grade" @click="activity(5)">
					<text class="grade-one">打过分的贡献</text>
					<view class="grade-two">
						<image src="/static/images/右@2x.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
					</view>
				</view>
				<view class="grade" @click="activity(6)">
					<text class="grade-one">回复过的建议</text>
					<view class="grade-two">
						<image src="/static/images/右@2x.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
					</view>
				</view>
				<view class="grade" @click="activity(7)">
					<text class="grade-one">发布过的学习</text>
					<view class="grade-two">
						<image src="/static/images/右@2x.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
					</view>
				</view>
			</view>
			<view @click="integral">
				<view class="grade">
					<text class="grade-one">积分排行</text>
					<view class="grade-two">
						<image src="/static/images/右@2x.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
					</view>
				</view>
			</view>
			<view @click="rule">
				<view class="grade">
					<text class="grade-one">履职考核说明</text>
					<view class="grade-two">
						<image src="/static/images/右@2x.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ip: this.$store.state.user.URL,
				key: uni.getStorageSync('roleKey'),
				userInfo: this.$store.state.user.userInfo,
			};
		},
		onShow() {
			// 获取用户信息
			console.log(this.userInfo);
		},
		computed: {
			// 判断是不是管理员，是管理员就返回一个true，不是就返回一个false
			keybl() {
				if (this.key === 'manager') {
					return false
				} else {
					return true
				}
			}
		},
		methods: {
			// 跳转积分排行
			integral() {
				uni.navigateTo({
					url: '/pages/integral/integral'
				})
			},
			// 跳转编辑个人资料
			myData() {
				uni.navigateTo({
					url: '/pages/my/myData/myData'
				})
			},
			// 跳转到数据看板
			DataBoard() {
				uni.navigateTo({
					url: '/pages/DataBoard/DataBoard'
				})
			},
			// 跳转到规则
			rule() {
				uni.navigateTo({
					url: '/pages/rule/rule'
				})
			},
			// 所以详情公用一个页面
			// -------- 普通用户 ---------
			// 0是参与过得活动
			// 1是做出的贡献
			// 2是提出的诉求
			// 3是参与过的学习
			// -------- 管理员 ---------
			// 4是发布过的活动
			// 5打过分的贡献
			// 6是解答的诉求
			// 7是发布的学习

			activity(id) {
				uni.navigateTo({
					url: `/pages/myParticipation/myParticipation?id=${id}`
				})
			},
			skip() {
				uni.navigateTo({
					url: `/pages/myParticulars/experience/experience`,
				})
			},
			participation() {
				uni.navigateTo({
					// url: `/pages/myParticulars/submitsubmit/submitsubmit`,
					url: `/pages/myParticulars/myActivity/myActivity`,
				})
			}
		}
	}
</script>

<style lang="scss">
	.gradient-ramp {
		background: linear-gradient(180deg, #16C1DB 0%, #F2FDFF 100%);
		height: 500rpx;
		padding: 72rpx 32rpx 0 32rpx;
	}

	.tbody {
		padding-top: 72rpx;
	}

	.messsage-box-one {
		display: flex;
		align-items: center;
		margin-bottom: 48rpx;

		.headportrait {
			width: 102rpx;
			height: 102rpx;
			margin-right: 32rpx;
		}

		.name {
			font-size: 32rpx;
			font-weight: 400;
			color: #F5FDFF;
			margin-bottom: 12rpx;
		}

		.id {
			font-size: 16rpx;
			font-weight: 400;
			letter-spacing: 0px;
			color: rgba(245, 253, 255, 1);
		}
	}

	.score-details {
		border-radius: 20rpx;
		background: #F2FDFF;
		padding: 32rpx;
		margin-bottom: 64rpx;

		.segmentation {
			margin-bottom: 48rpx;
			opacity: 0.3;
			border-bottom: 1rpx solid #16C1DB;
		}

		.score-one {
			padding-bottom: 16rpx;

			.number {
				font-size: 48rpx;
				font-weight: 700;
				color: rgba(22, 193, 219, 1);
				margin-right: 20rpx;
			}

			.str {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(22, 193, 219, 1);
				vertical-align: middle;
			}
		}

	}

	.join {
		display: flex;
		justify-content: space-between;
		text-align: center;
		margin-bottom: 24rpx;

		image {
			width: 64rpx;
			height: 64rpx;
			margin-bottom: 24rpx;
		}

		.text {
			font-size: 32rpx;
			font-weight: 400;
			line-height: 0px;
			color: rgba(22, 193, 219, 1);
			text-align: left;
		}
	}

	.grade {
		height: 80rpx;
		width: 622rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(242, 253, 255, 1);
		box-shadow: 0px 0px 4px 0px rgba(22, 193, 219, 0.2);
		display: flex;
		justify-content: space-between;
		padding: 0 32rpx;
		line-height: 80rpx;
		margin-bottom: 16rpx;

		.grade-one {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(20, 58, 64, 1);
		}

		.grade-two {
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(22, 193, 219, 1);

			.symbol {
				vertical-align: middle;
			}
		}
	}

	.my-behavior {
		margin-bottom: 24rpx;
		width: 686rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: #F5FDFF;
		box-shadow: 0px 0px 2rpx 0px #16C1DB;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;

		.grade {
			box-shadow: none;
		}
	}
</style>